<template>
<div>
<el-breadcrumb separator='-'>
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-button type="primary" @click="add">添加角色</el-button>
<el-table :data="tableData">
<el-table-column type="expand">
<template slot-scope="scope">
<el-row v-for="(item1,i1) in scope.row.children" :key="item1.id">
<el-col :span="4"><el-tag closable>{{item1.authName}}</el-tag><i class='el-icon-caret-right'></i></el-col>
<el-col :span="20">
<el-row v-for="(item2,i2) in item1.children" :key="item2.id">
<el-col :span="6"><el-tag closable>{{item2.authName}}</el-tag><i class='el-icon-caret-right'></i></el-col>
<el-col :span="18"><el-tag closable v-for="(item3,i3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag></el-col>
</el-row>
</el-col>
</el-row>
</template>

</el-table-column>
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="角色名称" prop="roleName">
</el-table-column>
<el-table-column label="角色描述" prop="roleDesc">
</el-table-column>
<el-table-column label="操作">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteuser()">删除</el-button>
<el-button type="warning" icon="el-icon-setting" size="mini" @click="()=>this.dialogVisible2 = true">分配权限</el-button>
</el-table-column>
</el-table>
</el-card>

<el-dialog
    title="添加角色"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <span>
    <el-form label-width="70px">
    <el-form-item label="用户名" required>
    <el-input v-model="queryInfo.roleName"></el-input>
    </el-form-item>
    <el-form-item label="密码" required>
    <el-input v-model="queryInfo.roleDesc"></el-input>
    </el-form-item>
    </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click=addUser>确 定</el-button>
    </span>
    </el-dialog>
<el-dialog
    title="编辑角色"
    :visible.sync="dialogVisible1"
    width="50%"
    :before-close="handleClose1">
    <span>
    <el-form label-width="70px">
    <el-form-item label="用户名" required>
    <el-input v-model="queryInfo.roleName"></el-input>
    </el-form-item>
    <el-form-item label="密码" required>
    <el-input v-model="queryInfo.roleDesc"></el-input>
    </el-form-item>
    </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click=addUser>确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
    title="分配权限" :visible.sync = "dialogVisible2"
    width="50%">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"> </el-tree>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取消</el-button>
    <el-button type="primary" @click=updateRight>确定</el-button>
    </span>
    </el-dialog>
</div>
</template>
<script>
export default{
    data(){
        return{
        tableData:'',
        queryInfo:{
            roleName:'',
            roleDesc:''
        },
        dialogVisible:false,
        dialogVisible1:false,
        dialogVisible2:false,
        data:'',
        defaultProps:{
            label:'authName',
            children:'children'
        }
        }
    },
    methods:{
        getTableData(){
            this.$http.get('roles').then(data=>{
                if(data.data.meta.status!==200){
                    this.$message.error('获取用户失败')
                }else{
                    this.tableData = data.data.data
                    console.log(data.data.data)
                }
            })
        },
        async getTree(){
           const{data:res} = await this.$http.get("right/tree")
           if(res.meta.status !==200){
               this.$message.error("获取权限列表失败")
               console.log(res)
            }else{
                this.data = res.data
            }
        },
        handleClose(){
            this.dialogVisible = false
        },
        handleClose1(){
            this.dialogVisible1 = false
        },
        add(){
            this.dialogVisible = true
        },
        edit(){
            this.dialogVisible1 = true
        },
        deleteuser(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('users/'+id).then(data=>{
            if(data.data.meta.status!==200){
              this.$message.error('删除失败')
            }else{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    },
    created(){
        this.getTableData()
        this.getTree()
    }
}
</script>

<style>

</style>